
<template>
  <div
    ref="chartsRef"
    class="charts"
  ></div>
</template>

<script lang="ts" setup>
interface PropsType {
  option: any;
}

const props = withDefaults(defineProps<PropsType>(), {
  option: undefined,
});

const chartsRef = ref<HTMLDivElement | null>(null);

const { setOption } = useCharts(chartsRef as Ref<HTMLDivElement>);

watch(props, () => {
  setOption(props.option)
})

onMounted(() => {
  setOption(props.option)
});
</script>

<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>